<!--
 * @Author: xiezhiquan3878
 * @Date: 2024-06-23 14:21:51
 * @LastEditors: xiezhiquan3878 xiezhiquan3878
 * @LastEditTime: 2024-06-23 19:28:57
 * @FilePath: \heart-backed\src\views\banner\index.vue
 * @Description: 重启任务(模型类型为faq的)
-->
<template>
  <div class="reserve-task-page">
    <div class="header-title">重启任务</div>

    <el-form
      ref="form"
      :model="modelData"
      label-width="120px"
      label-position="top"
      size="small"
    >
      <el-form-item label="问题">
        <el-input
          v-model="modelData.question"
          placeholder="请输入"
        />
      </el-form-item>
      <el-form-item label="答案">
        <el-input
          v-model="modelData.answer_text"
          type="textarea"
          placeholder="请输入"
          :rows="2"
        />
      </el-form-item>
      <div class="flex justify-between">
        <el-form-item
          label="答案附件"
          class="w-100%"
        >
          <el-radio
            v-model="modelData.attachment_type"
            :label="0"
          >
            链接
          </el-radio>
          <el-radio
            v-model="modelData.attachment_type"
            :label="1"
          >
            图片
          </el-radio>
        </el-form-item>

        <el-form-item
          :label="`链接${modelData.attachment_type == 1 ? '图片' : '地址'}`"
          class="w-100%"
        >
          <UpImage
            v-if="modelData.attachment_type === 1"
            :url="modelData.attachment_payload"
            @getImg="getFile2"
          />
          <el-input
            v-else
            v-model="modelData.attachment_payload"
            placeholder="请输入"
          />
        </el-form-item>
      </div>
      <el-form-item label="视频类型">
        <div class>
          <div class="flex flex-wrap">
            <div class="w-100%">
              <el-radio
                v-model="modelData.answer_video_media_info.auto_switch"
                :disabled="moData.enable_video_generate === 0"
                :label="1"
              >
                一键自动生成
              </el-radio>
              <el-radio
                v-model="modelData.answer_video_media_info.auto_switch"
                :label="0"
              >
                自主上传视频
              </el-radio>
            </div>
          </div>
        </div>
        <UpVideoFile
          v-if="!modelData.answer_video_media_info.auto_switch"
          :url="modelData.answer_video_media_info.oss_url"
          @getFile="getFile"
        />
      </el-form-item>
    </el-form>
    <div class="demo-drawer-footer">
      <el-button @click="cancelFun()">取 消</el-button>
      <el-button
        type="primary"
        @click="confirmClick()"
      >
        保存
      </el-button>
    </div>
  </div>
</template>

<script>
import { getFaqApi, coverFaqApi } from '@/api/faq'
import { modelDet } from '@/api/model'
import UpVideoFile from '@/components/upload/up-video-file.vue'
import UpImage from '@/components/upload/up-image2.vue'

export default {
  components: {
    UpVideoFile,
    UpImage
    // digQuestion
  },
  props: {},
  data() {
    return {
      oss_url: null,
      moData: {
        enable_video_generate: 0
      },
      modelData: {
        answer_video_media_info: {
          // 媒体信息
          id: 15,
          users_uniqueid: 'n6mbo00lqb0d0djwg4dx5bnuc3npmgqr',
          media_hash: 'ee604eedae3d4d70a7df18adadd3146c',
          original_url: '',
          oss_url:
            'n6mbo00lqb0d0djwg4dx5bnuc3npmgqr/8414ae599c104189ae99c64d19d54dbe/faq/ee604eedae3d4d70a7df18adadd3146c.mp4',
          media_type: 'video/mp4',
          disk_size: 3761112,
          duration: 0,
          enable_status: 1,
          link_media_oss_url: '',
          auto_switch: 0,
          create_datetime: '2024-05-07 13:52:49',
          update_datetime: '2024-05-07 13:52:49',
          delete_switch: 0,
          source: 'faq'
        },
        id: 1121,
        question: '你好', // 问题
        model_uniqueid: '8414ae599c104189ae99c64d19d54dbe', // 模型唯一值
        faq_uniqueid: '1e8b6538777949a0851fcf499450a9a8', // faq唯一值
        answer_text: 'hello word', // 答案
        answer_video_hash: 'ee604eedae3d4d70a7df18adadd3146c', // 答案视频哈希值
        nlp_faq_id: '16d6101335d84139b4912343e903b5b4',
        faq_simq_list: '', // 关联问题
        create_datetime: '2024-05-07 13:52:51',
        update_datetime: '2024-05-07 13:52:51',
        users_uniqueid: 'n6mbo00lqb0d0djwg4dx5bnuc3npmgqr',
        delete_switch: 0,
        select_count: 10, // faq被选为答案的总次数
        hot_switch: 0, // 热点问题 0=否,1=是
        attachment_type: 0, // 附件类型:0=链接,1=图片
        attachment_payload: '' // 附件载体
      }
    }
  },
  watch: {
    'modelData.attachment_type': {
      handler(val, val2) {
        if (val !== val2 && val !== undefined && val2 !== undefined) {
          this.modelData.attachment_payload = undefined
        }
      },
      deep: true
    }
  },
  created() {
    this.init()
  },
  methods: {
    init() {
      const query = this.$route.query
      this.getMobanFun(query)
      this.getFaqFun(query)
    },
    getMobanFun(query) {
      const data = {
        model_uniqueid: query.model_uniqueid
      }
      modelDet(data).then((res) => {
        if (res.data && JSON.stringify(res.data) !== '{}') {
          this.moData = res.data
        } else {
          this.moData = {
            id: null,
            enable_video_generate: 0
          }
        }
      })
    },
    getFaqFun(query) {
      const data = {
        model_uniqueid: query.model_uniqueid,
        faq_uniqueid: query.faq_uniqueid
      }
      getFaqApi(data).then((res) => {
        this.modelData = res.data[0]
      })
    },
    // 确认
    confirmClick() {
      this.$confirm('确认重启该任务?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          if (this.moData.id === null) {
            this.$message({
              message: '该模型已删除无法重启！',
              type: 'warning'
            })
            return false
          }
          if (
            this.oss_url === null &&
            this.modelData.answer_video_media_info.auto_switch === 0
          ) {
            this.$message({
              message: '请修改视频！',
              type: 'warning'
            })
            return false
          }
          const formData = new FormData()
          formData.append('model_uniqueid', this.modelData.model_uniqueid)
          formData.append('faq_uniqueid', this.modelData.faq_uniqueid)
          formData.append('question', this.modelData.question)
          formData.append('answer_text', this.modelData.answer_text)
          formData.append(
            'attachment_payload',
            this.modelData.attachment_payload
          )
          formData.append('attachment_type', this.modelData.attachment_type)
          formData.append(
            'generate_switch',
            this.modelData.answer_video_media_info.auto_switch
          )
          if (this.oss_url !== null) {
            formData.append('answer_media_file', this.oss_url)
          }
          coverFaqApi(formData)
            .then(() => {
              this.$message({
                message: '该任务已重启！',
                type: 'success'
              })
              this.$router.go(-1)
            })
            .catch(() => {
              this.$message({
                message: '重启失败，请重试！',
                type: 'warning'
              })
            })
        })
        .catch(() => {
          //
        })
    },
    cancelFun() {
      this.$router.go(-1)
    },
    getFile(file) {
      // this.modelData.answer_video_media_info.oss_url = file.raw
      this.oss_url = file.raw
    },
    getFile2(file) {
      this.modelData.attachment_payload = file
    }
  }
}
</script>
<style lang="scss" scoped>
.reserve-task-page {
  width: 100%;
  padding: 20px;
  height: 100%;
  background-color: #fff;
  padding-left: 150px;
}

.header-title {
  position: relative;
  padding: 8px 13px;
  font-weight: 600;
  font-size: 20px;
  color: #1c1f23;
  line-height: 28px;
  text-align: left;
  font-style: normal;
  text-transform: none;
  margin-bottom: 20px;

  &::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 20px;
    background: #04d1b8;
  }
}

.demo-drawer-content {
  margin-top: -10px;
  padding: 0 138px 0;
  height: calc(100vh - 85px);
  overflow-y: auto;
}

.demo-drawer-footer {
  text-align: center;
  margin-top: 10px;
}

::v-deep {
  .el-form-item__label {
    font-weight: 400;
    font-size: 14px;
    color: #1c1f23;
    line-height: 22px;
  }

  .avatar-uploader-box .avatar-uploader .el-upload {
    width: 120px;
    height: 120px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}

.btn-fix {
  position: absolute;
  left: 70px;
  top: -36px;
  font-size: 12px;
  cursor: pointer;
}

.box {
  background: #f4f5f9;
  border-radius: 0px 0px 0px 0px;
  padding: 12px;

  .box-item {
    align-items: center;
    margin-bottom: 10px;

    &:last-child {
      margin-bottom: 0;
    }
  }

  .delete-icon {
    width: 30px;
    height: 30px;
    display: inline-block;
    margin-right: 10px;
    padding: 8px;
    cursor: pointer;
  }
}

.add {
  font-weight: 400;
  font-size: 12px;
  display: flex;
  align-items: center;

  img {
    width: 14px;
    height: 14px;
    display: block;
    margin-right: 4px;
  }
}
</style>
